<template>
  <div class="homeWrap wrap">
    <!-- <iframe src="http://localhost/panorama/click-index.html" class="area" ></iframe> -->
    <iframe
      style="width:100%;height:100%;"
      :src="bdTokenUrl"
      frameborder="0"
      scrolling="no"
      id="bdIframe"
      class="diframe"
    >
    </iframe>
    <wap-menu />
    <CookiesWarp
      @saveCookies2="saveCookies2"
      @closeFun="closeFun"
      v-if="saveCookies == 'show'"
    />
  </div>
</template>

<script>
import api from "servicePath/index";
import * as THREE from "three";
import { mapState, mapMutations } from "vuex";
import wapMenu from "./components/menu.vue";
import CookiesWarp from "componentsPath/cookiesWrap/wap/index";

// import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";

export default {
  data() {
    return {
      dialogVisible: false,
      videoUrl: "",
      bdTokenUrl: "https://showroom.covestro.com/3d/fakuma/index.html?id=2"
      // bdTokenUrl: "http://localhost/FakumaCN/index.html"
    };
  },
  watch: {
    $route() {
      console.log("------- $route");
      // var videoIndex = this.$route.query.videoIndex;
      // this.$route.query.videoIndex = undefined;
      // this.handleQueryVideoIndex(videoIndex);
    },
    lang() {
      this.handle3DUrl();
    }
  },
  computed: {
    ...mapState(["lang", "saveCookies", "userInfo"])
  },

  components: {
    wapMenu,
    CookiesWarp
  },
  mounted() {
    this.camera;
    this.scene;
    this.renderer;
    this.isUserInteracting = false;
    this.onMouseDownMouseX = 0;
    this.onMouseDownMouseY = 0;
    this.lon = 0;
    this.onMouseDownLon = 0;
    this.lat = 0;
    this.onMouseDownLat = 0;
    this.phi = 0;
    this.theta = 0;
    // this.init()
    // this.animate()
    this.handle3DUrl();

    const oIframe = document.getElementById("bdIframe");
    const deviceWidth = document.documentElement.clientWidth;
    const deviceHeight = document.documentElement.clientHeight;
    oIframe.style.width = Number(deviceWidth) - 0 + "px"; //数字是页面布局宽度差值
    oIframe.style.height = Number(deviceHeight) - 0 + "px"; //数字是页面布局高度差

    console.log("mounted handleQueryVideoIndex");

    window.addEventListener("message", eve => {
      console.log("message");
      console.log(eve.data);
      // alert(eve.data.cmd + ":" + eve.data.params);
      var cmd = eve.data.cmd;
      var params = eve.data.params;

      if (cmd == "videoIndex") {
        if (this.hasLogin()) {
          this.handleQueryVideoIndex(params);
        }
      } else if (cmd == "schedule") {
        if (this.hasLogin()) {
          this.$router.push({
            path: "/fakuma/wap/schedule"
          });
        }
      } else if (cmd == "detail") {
        if (this.hasLogin()) {
          this.$router.push({
            path: "/fakuma/wap/detail/" + params
          });
        }
      }
    });

    // var videoIndex = this.$route.query.videoIndex;
    // this.$route.query.videoIndex = undefined;
    // this.handleQueryVideoIndex(videoIndex);
  },
  methods: {
    ...mapMutations(["saveCookie"]),
    handle3DUrl() {
      if (this.lang === "en") {
        this.bdTokenUrl =
          "https://showroom.covestro.com/3d/fakuma/index.html?id=2";
      }
      if (this.lang === "zh") {
        this.bdTokenUrl =
          "https://showroom.covestro.com/3d/fakuma/index.html?id=1&wmode=opaque";
      }
      if (this.lang === "de") {
        this.bdTokenUrl =
          "https://showroom.covestro.com/3d/fakuma/index.html?id=3&wmode=opaque";
      }
    },
    hasLogin() {
      let isLogin = sessionStorage.getItem("vrToken");
      if (!isLogin) {
        this.$router.push({
          path: `login`
        });
        console.log("hasLogin 请登录");
        return false;
      }
      return true;
    },
    handleQueryVideoIndex(videoIndex) {
      console.log("videoIndex", videoIndex);
      if (videoIndex !== undefined) {
        // this.dialogVisible = true;
        console.log(!this.userInfo);
        if (!this.hasLogin()) {
          return false;
        }

        if (videoIndex == 1) {
          this.videoUrl =
            "https://digitalshowroom.blob.core.chinacloudapi.cn/video/Fakuma_Digital_Showroom_EN_V4.mp4";
        } else if (videoIndex == 2) {
          this.videoUrl =
            "https://digitalshowroom.blob.core.chinacloudapi.cn/video/Fakuma_Sample_Library_V4_EN_16zu9.mp4";
        } else if (videoIndex == 3) {
          this.videoUrl =
            "https://digitalshowroom.blob.core.chinacloudapi.cn/video/Circular Economy.mp4";
        }

        window.location.href = this.videoUrl;
      }
    },
    handleClose(done) {
      done();
      this.$refs.videoPlay.pause();
    },

    // cookies弹窗
    saveCookies2() {
      this.saveCookie("hide");
      localStorage.setItem("saveCookies", "hide");
      console.log(this.saveCookies);
    },
    closeFun() {
      this.saveCookie("hide");
    }
  }
};
</script>

<style lang="scss" scoped>
// .homeWrap {
//   // background: url('../../../../assets/imgs/tree.png') no-repeat;
//   background-size: cover;
// }

.homeWrap {
  .area {
    width: 100%;
    height: 100%;
    // margin-top: 200px;
  }
  // .diframe{
  //   z-index: 1;
  //   position: absolute;
  // }
}
.video-player {
  width: 800px;
  height: 450px;
  // margin-top: 30px;
  background-color: #333333;
  margin: 0 auto;
}
</style>
